<template>
  <div>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="流程名称">
        <el-input v-model="queryForm.definitionName" placeholder="请输入流程名称" clearable />
      </el-form-item>
      <el-form-item label="课题名称">
        <el-input v-model="queryForm.topicName" placeholder="请输入课题名称" clearable />
      </el-form-item>
      <el-form-item label="发起人">
        <el-input v-model="queryForm.startUserName" placeholder="请输入发起人" clearable />
      </el-form-item>
      <el-form-item label="节点">
        <el-input v-model="queryForm.taskName" placeholder="请输入节点" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="list"
              border
              style="width: 100%; min-width: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);"
              :header-cell-style="{ backgroundImage: 'linear-gradient(to right, #f0f9ff, #e5eaff)', color: '#333', fontWeight: 'bold' }"
              :cell-style="{ padding: '12px 8px' }"
              fit
    >
      <el-table-column label="序号" type="index" width="100" />
      <el-table-column label="流程名称" align="center" prop="definitionName" />
      <el-table-column label="课题名称" align="center" prop="topicName" />
      <el-table-column label="创建时间" align="center" prop="createTime" sortable />
      <el-table-column label="当前节点" align="center" prop="taskName" />
      <el-table-column label="发起人" align="center" prop="startUserName" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <div class="button-group">
            <el-button link class="btn-view" @click="handleHistoryRecord(scope.row.processInstanceId)">
              <el-icon class="icon"><More /></el-icon>审批记录
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      v-model:page-size="queryForm.pageSize"
      v-model:current-page="queryForm.pageNo"
      :total="total"
      @current-change="fetchData"
    />

    <!-- 审批记录 -->
    <HistoryRecord ref="historyRecordRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { debounce } from "lodash-es";
import baseService from "@/service/baseService";
// @ts-ignore
import HistoryRecord from "@/components/HistoryRecord/index.vue";

// 查询参数
const queryForm = reactive({
  definitionName: "",
  topicName: "",
  startUserName: "",
  taskName: "",
  pageNo: 1,
  pageSize: 10
});

const total = ref(0);
const loading = ref(false);
const list = ref<any[]>([]);
const historyRecordRef = ref();

const fetchData = async () => {
  loading.value = true;
  try {
    const res = await baseService.post("/processDefinition/listExecutions", queryForm);
    if (res.code === 200) {
      list.value = res.data.records;
      total.value = res.data.total;
    } else {
      list.value = [];
    }
  } catch (error) {
    console.error("Failed to fetch data:", error);
  } finally {
    loading.value = false;
  }
};

// 设置每个输入框的 `watch`，监听变化，并向后端请求数据
watch(() => queryForm.definitionName, debounce(fetchData, 500));
watch(() => queryForm.topicName, debounce(fetchData, 500));
watch(() => queryForm.startUserName, debounce(fetchData, 500));
watch(() => queryForm.taskName, debounce(fetchData, 500));

// 重置查询表单
function resetQuery() {
  queryForm.definitionName = "";
  queryForm.topicName = "";
  queryForm.startUserName = "";
  queryForm.taskName = "";
  queryForm.pageNo = 1;
  fetchData();
}

// 审批记录弹出框
function handleHistoryRecord(instanceId: string) {
  historyRecordRef.value.open(instanceId);
}

// 初始化加载数据
fetchData();
</script>


<style scoped>
/* 表格整体样式 */
.el-table {
  background-color: #fff;
  font-size: 14px;
  transition: all 0.3s;
}

/* 表头样式 */
.el-table__header-wrapper th {
  background-image: linear-gradient(to right, #f0f9ff, #e5eaff);
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 行悬停效果 */
.el-table .el-table__body-wrapper tr:hover {
  background-color: #f0f9ff;
  transition: background-color 0.2s ease;
}

/* 状态标签样式 */
.tag-danger {
  background-color: #ff6b6b !important;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 500;
}
.tag-active {
  background-color: #4caf50 !important;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 500;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.button-group .el-button {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
  min-width: 60px;
  transition: all 0.2s;
}
.btn-design {
  background-color: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-activate {
  background-color: #4caf50;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-suspend {
  background-color: #ff9800;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-view {
  background-color: #5c6bc0;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-delete {
  background-color: #e57373;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button-group .el-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* 无信息提示样式 */
.empty-info {
  color: #999;
  font-size: 14px;
  text-align: center;
  margin: 0;
  font-weight: 500;
}
/* 图标样式 */
.icon {
  margin-right: 5px; /* 调整图标与文字之间的距离 */
}

</style>
